.content-block-creator {
  transition: all 0.25s ease-in-out;
}

.content-block-creator--open .content-block-creator__inner-container {
  animation: slideDown 0.25s ease-in-out;
}

.content-block-creator__top-button-container:before {
  content: "";
  @apply absolute w-full h-px border-t border-dashed border-gray-500;
  top: 50%;
  transform: translateY(-50%);
}

.content-block-creator__plus-button-icon {
  transition: all 0.25s ease-in-out;
}

.content-block-creator--open .content-block-creator__plus-button-icon {
  transform: rotate(45deg);
}

.content-block-creator--open .content-block-creator__block-content-type {
  display: flex;
  user-select: none;
}

.content-block-creator--open .content-block-creator__top-button {
  @apply bg-primary-900 text-primary-200 border-transparent;
}

.content-block-creator--open .content-block-creator__top-button-container {
  opacity: 1;
}

.content-block-creator--open
  .content-block-creator__top-button-container:before {
  @apply border-t-0;
}

@screen xl {
  .content-block-creator__top-button-container {
    opacity: 0;
  }
  .content-block-creator:hover .content-block-creator__top-button-container,
  .content-block-creator:focus-within
    .content-block-creator__top-button-container {
    transition: opacity 0.25s;
    opacity: 1;
  }
  .content-block-creator:not(.content-block-creator--open):hover
    .content-block-creator__top-button {
    @apply shadow-lg;
  }
}
